<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>折线图节点</title>
  <style>
    #mountNode {
      background:#001528;
    }
  </style>
</head>
<body>
  <div id="mountNode"></div>
  <script src="../build/g6.js"></script>
  <script>
    /**
     * 该案例演示如何自定义一个折线图节点
     * by 镜曦
     * 
    */

    // 自定义折线图节点
    G6.registerNode('circleLine', {
      draw(cfg, group) {
        const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小
        const width = size[0];
        const height = size[1];
        
        const baseR = 30;
        let nowAngle = 0;
        
        // Ref line
        let refR = baseR;
        const refInc = 10;
        for(let i = 0; i< 5; i++){
          group.addShape('circle', {
            // attrs: style
            attrs: {
              x: 0, // 居中
              y: 0,
              r: refR += refInc,
              stroke:'rgba(255,255,255,0.4)',
              lineDash:[4, 4],
              
            }
          });
        }
        
        const everyIncAngle = 2 * Math.PI * (360 / 5 / 5) / 360;
        cfg.details.forEach(cat =>{
          // 计算一系列点的位置
          const postions = [];
          cat.values.forEach((item, index) =>{        
            const r = baseR + item;
            const xPos = r * Math.cos(nowAngle);
            const yPos = r * Math.sin(nowAngle);
            nowAngle += everyIncAngle;
            postions.push([xPos, yPos]);
            if(index === 4){
              const r = baseR + item;
              const xPos = r * Math.cos(nowAngle );
              const yPos = r * Math.sin(nowAngle );
              postions.push([xPos, yPos]);
            }
          });
          const pathArrayL = postions.map(item =>(["L", ...item]));
          // 添加连线
          const shape = group.addShape('path', {
            attrs: {
              path: [
                ['M', 0, 0 ], // 上部顶点
                ...pathArrayL,
                ['Z'] // 封闭
              ],
              stroke: cat.color // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
            }
          });
          // 添加标注点
          postions.forEach(( pos, index )=>{
            if(index !== 5){
                const littleCircle = group.addShape('circle', {
                // attrs: style
                attrs: {
                  x: pos[0], // 居中
                  y: pos[1],
                  r: 2,
                  fill: 'black',
                  stroke:cat.color,
                  cursor: "pointer",
                }
              });
              // 加上交互动画
              littleCircle.on('mouseenter', function(evt) {
                littleCircle.animate({
                    r: 5,
                    repeat: false     
                }, 200);
              });
              littleCircle.on('mouseleave', function(evt) {
                littleCircle.animate({
                    r: 2,
                    repeat: false     
                }, 200);
              });
              // 设置class
              littleCircle.set("className", 'littleCircle');
            }
          
          })
          
          /*
          const shape = group.addShape('path', {
            attrs: {
              path: [
                ['M', 0, 0 ], // 上部顶点
                ['L', width / 2, 0], // 右侧点
                ['L', 0, height / 2], // 下部
                ['L', - width / 2, 0], // 左侧
                ['Z'] // 封闭
              ],
              stroke: cfg.color // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
            }
          });
          
          */

        });

          // 添加一个和背景色相同的圆形
        group.addShape('circle', {
          // attrs: style
          attrs: {
            x: 0, // 居中
            y: 0,
            r: baseR,
            fill: cfg.centerColor,
            stroke:'darkgray',
          }
        });
        if(cfg.label) {
          group.addShape('text', {
            // attrs: style
            attrs: {
              x: 0, // 居中
              y: 0,
              textAlign: 'center',
              textBaseline: 'middle',
              text: cfg.label,
              fill: 'white',
              fontStyle:'bold',
            }
          });
        }
        return group;
      }
    });

    const graph = new G6.Graph({
      container: 'mountNode',
      width: 500,
      height: 500
    })

    const data = {
      nodes: [
        {
          id: 'nodeB',
          x: 400,
          y: 150,
          label: 'Line',
          shape:'circleLine',
          anchorPoints: [
            [0, 0.5], [1, 0.5]
          ],
          details:[
            {cat:'pv', values:[20,30,40,30,30], color:"#25cbfd"},
            {cat:'dal', values:[40,30,20,30,50], color:"#feff7b"},
            {cat:'uv', values:[40,30,30,40,40], color:"#feab3a"},
            {cat:'sal', values:[20,30,50,20,20], color:"#fe5766"},
            {cat:'cal', values:[10,10,20,20,20], color:"#16c176"},
          ],
          centerColor:'#0066FF',
          
        }
      ]
    }

    graph.data(data)
    graph.render()
  </script>
</body>
</html>